2 September 2025Bahasa Indonesia

Buka kekuatan WebCodecs! Panduan komprehensif untuk mengakses dan memanipulasi data frame video menggunakan bidang VideoFrame. Pelajari format piksel, tata letak memori, dan kasus penggunaan praktis untuk pemrosesan video canggih di browser.

Bidang VideoFrame WebCodecs: Penyelaman Mendalam Akses Data Frame Video

WebCodecs merepresentasikan pergeseran paradigma dalam pemrosesan media berbasis web. Ini menyediakan akses tingkat rendah ke blok-blok pembangun media, memungkinkan pengembang untuk membuat aplikasi canggih langsung di browser. Salah satu fitur paling kuat dari WebCodecs adalah objek VideoFrame, dan di dalamnya, bidang VideoFrame yang mengekspos data piksel mentah dari frame video. Artikel ini menyediakan panduan komprehensif untuk memahami dan memanfaatkan bidang VideoFrame untuk manipulasi video tingkat lanjut.

Memahami Objek VideoFrame

Sebelum menyelami bidang (plane), mari kita rekap objek VideoFrame itu sendiri. Sebuah VideoFrame merepresentasikan satu frame video. Ini mengenkapsulasi data video yang telah didekode (atau dienkode), beserta metadata terkait seperti stempel waktu, durasi, dan informasi format. API VideoFrame menawarkan metode untuk:

Membaca data piksel: Di sinilah bidang berperan.
Menyalin frame: Membuat objek VideoFrame baru dari yang sudah ada.
Menutup frame: Melepaskan sumber daya yang mendasari yang dipegang oleh frame.

Objek VideoFrame dibuat selama proses dekode, biasanya oleh VideoDecoder, atau secara manual saat membuat frame kustom.

Apa itu Bidang VideoFrame?

Data piksel dari sebuah VideoFrame sering kali diatur ke dalam beberapa bidang, terutama dalam format seperti YUV. Setiap bidang merepresentasikan komponen gambar yang berbeda. Sebagai contoh, dalam format YUV420, ada tiga bidang:

Y (Luma): Merepresentasikan kecerahan (luminance) gambar. Bidang ini berisi informasi grayscale.
U (Cb): Merepresentasikan komponen kroma selisih-biru.
V (Cr): Merepresentasikan komponen kroma selisih-merah.

Format RGB, meskipun tampaknya lebih sederhana, mungkin juga menggunakan beberapa bidang dalam beberapa kasus. Jumlah bidang dan maknanya sepenuhnya bergantung pada VideoPixelFormat dari VideoFrame tersebut.

Keuntungan menggunakan bidang adalah memungkinkan akses dan manipulasi yang efisien terhadap komponen warna tertentu. Misalnya, Anda mungkin ingin menyesuaikan hanya luminans (bidang Y) tanpa memengaruhi warna (bidang U dan V).

Mengakses Bidang VideoFrame: API

API VideoFrame menyediakan metode berikut untuk mengakses data bidang:

copyTo(destination, options): Menyalin konten VideoFrame ke tujuan, yang bisa berupa VideoFrame lain, CanvasImageBitmap, atau ArrayBufferView. Objek options mengontrol bidang mana yang disalin dan bagaimana caranya. Ini adalah mekanisme utama untuk akses bidang.

Objek options dalam metode copyTo memungkinkan Anda untuk menentukan tata letak dan target untuk data frame video. Properti kunci meliputi:

format: Format piksel yang diinginkan dari data yang disalin. Ini bisa sama dengan VideoFrame asli atau format yang berbeda (misalnya, mengonversi dari YUV ke RGB).
codedWidth dan codedHeight: Lebar dan tinggi frame video dalam piksel.
layout: Sebuah array objek yang mendeskripsikan tata letak setiap bidang dalam memori. Setiap objek dalam array menentukan:

offset: Offset, dalam byte, dari awal buffer data ke awal data bidang.
stride: Jumlah byte antara awal setiap baris di bidang. Ini sangat penting untuk menangani padding.

Mari kita lihat contoh menyalin VideoFrame YUV420 ke buffer mentah:


async function copyYUV420ToBuffer(videoFrame, buffer) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  // YUV420 memiliki 3 bidang: Y, U, dan V
  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const layout = [
    { offset: 0, stride: width }, // Bidang Y
    { offset: yPlaneSize, stride: width / 2 }, // Bidang U
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // Bidang V
  ];

  await videoFrame.copyTo(buffer, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  videoFrame.close(); // Penting untuk melepaskan sumber daya
}

Penjelasan:

Kami menghitung ukuran setiap bidang berdasarkan width dan height. Y memiliki resolusi penuh, sedangkan U dan V disub-sampling (4:2:0).
Array layout mendefinisikan tata letak memori. offset menentukan di mana setiap bidang dimulai di dalam buffer, dan stride menentukan jumlah byte untuk melompat ke baris berikutnya di bidang tersebut.
Opsi format diatur ke 'I420', yang merupakan format YUV420 umum.
Sangat penting, setelah penyalinan, videoFrame.close() dipanggil untuk membebaskan sumber daya.

Format Piksel: Dunia Penuh Kemungkinan

Memahami format piksel sangat penting untuk bekerja dengan bidang VideoFrame. VideoPixelFormat mendefinisikan bagaimana informasi warna dienkode dalam frame video. Berikut adalah beberapa format piksel umum yang mungkin Anda temui:

I420 (YUV420p): Format YUV planar di mana komponen Y, U, dan V disimpan dalam bidang terpisah. U dan V di-subsample dengan faktor 2 baik dalam dimensi horizontal maupun vertikal. Ini adalah format yang sangat umum dan efisien.
NV12 (YUV420sp): Format YUV semi-planar di mana Y disimpan dalam satu bidang, dan komponen U dan V disisipkan (interleaved) dalam bidang kedua.
RGBA: Komponen Merah, Hijau, Biru, dan Alpha disimpan dalam satu bidang, biasanya dengan 8 bit per komponen (32 bit per piksel). Urutan komponen dapat bervariasi (misalnya, BGRA).
RGB565: Komponen Merah, Hijau, dan Biru disimpan dalam satu bidang dengan 5 bit untuk Merah, 6 bit untuk Hijau, dan 5 bit untuk Biru (16 bit per piksel).
GRAYSCALE: Merepresentasikan gambar grayscale dengan satu nilai luma (kecerahan) untuk setiap piksel.

Properti VideoFrame.format akan memberi tahu Anda format piksel dari frame tertentu. Pastikan untuk memeriksa properti ini sebelum mencoba mengakses bidang. Anda dapat merujuk ke spesifikasi WebCodecs untuk daftar lengkap format yang didukung.

Kasus Penggunaan Praktis

Mengakses bidang VideoFrame membuka berbagai kemungkinan untuk pemrosesan video canggih di browser. Berikut adalah beberapa contoh:

1. Efek Video Real-time

Anda dapat menerapkan efek video real-time dengan memanipulasi data piksel di VideoFrame. Misalnya, Anda bisa mengimplementasikan filter grayscale dengan merata-ratakan komponen R, G, dan B dari setiap piksel dalam frame RGBA dan kemudian mengatur ketiga komponen tersebut ke nilai rata-rata itu. Anda juga bisa membuat efek nada sepia atau menyesuaikan kecerahan dan kontras.


async function applyGrayscale(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;
  const buffer = new ArrayBuffer(width * height * 4); // RGBA
  const rgba = new Uint8ClampedArray(buffer);

  await videoFrame.copyTo(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height
  });

  for (let i = 0; i < rgba.length; i += 4) {
    const r = rgba[i];
    const g = rgba[i + 1];
    const b = rgba[i + 2];

    const gray = (r + g + b) / 3;

    rgba[i] = gray;       // Merah
    rgba[i + 1] = gray;   // Hijau
    rgba[i + 2] = gray;   // Biru
  }

  // Buat VideoFrame baru dari data yang dimodifikasi.
  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Lepaskan frame asli
  return newFrame;
}

2. Aplikasi Visi Komputer

Bidang VideoFrame menyediakan akses langsung ke data piksel yang dibutuhkan untuk tugas-tugas visi komputer. Anda dapat menggunakan data ini untuk mengimplementasikan algoritma deteksi objek, pengenalan wajah, pelacakan gerak, dan banyak lagi. Anda dapat memanfaatkan WebAssembly untuk bagian kode yang kritis terhadap kinerja.

Sebagai contoh, Anda bisa mengonversi VideoFrame berwarna menjadi grayscale dan kemudian menerapkan algoritma deteksi tepi (misalnya, operator Sobel) untuk mengidentifikasi tepi dalam gambar. Ini bisa digunakan sebagai langkah pra-pemrosesan untuk pengenalan objek.

3. Penyuntingan dan Pengomposisian Video

Anda dapat menggunakan bidang VideoFrame untuk mengimplementasikan fitur penyuntingan video seperti memotong (cropping), penskalaan (scaling), rotasi, dan pengomposisian (compositing). Dengan memanipulasi data piksel secara langsung, Anda dapat membuat transisi dan efek kustom.

Misalnya, Anda bisa memotong VideoFrame dengan hanya menyalin sebagian dari data piksel ke VideoFrame baru. Anda perlu menyesuaikan offset dan stride layout yang sesuai.

4. Codec Kustom dan Transcoding

Meskipun WebCodecs menyediakan dukungan bawaan untuk codec umum seperti AV1, VP9, dan H.264, Anda juga dapat menggunakannya untuk mengimplementasikan codec kustom atau alur kerja transcoding. Anda perlu menangani proses enkode dan dekode sendiri, tetapi bidang VideoFrame memungkinkan Anda mengakses dan memanipulasi data piksel mentah. Ini bisa berguna untuk format video khusus atau persyaratan enkode yang terspesialisasi.

5. Analitik Tingkat Lanjut

Dengan mengakses data piksel yang mendasarinya, Anda dapat melakukan analisis mendalam terhadap konten video. Ini mencakup tugas-tugas seperti mengukur kecerahan rata-rata sebuah adegan, mengidentifikasi warna dominan, atau mendeteksi perubahan dalam konten adegan. Ini dapat memungkinkan aplikasi analitik video canggih untuk keamanan, pengawasan, atau analisis konten.

Bekerja dengan Canvas dan WebGL

Meskipun Anda dapat memanipulasi data piksel secara langsung di bidang VideoFrame, Anda sering kali perlu merender hasilnya ke layar. Antarmuka CanvasImageBitmap menyediakan jembatan antara VideoFrame dan elemen <canvas>. Anda dapat membuat CanvasImageBitmap dari VideoFrame dan kemudian menggambarnya ke kanvas menggunakan metode drawImage().


async function renderVideoFrameToCanvas(videoFrame, canvas) {
  const bitmap = await createImageBitmap(videoFrame);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  bitmap.close(); // Lepaskan sumber daya bitmap
  videoFrame.close(); // Lepaskan sumber daya VideoFrame
}

Untuk rendering yang lebih canggih, Anda dapat menggunakan WebGL. Anda dapat mengunggah data piksel dari bidang VideoFrame ke tekstur WebGL dan kemudian menggunakan shader untuk menerapkan efek dan transformasi. Ini memungkinkan Anda memanfaatkan GPU untuk pemrosesan video berkinerja tinggi.

Pertimbangan Kinerja

Bekerja dengan data piksel mentah bisa sangat intensif secara komputasi, jadi sangat penting untuk mempertimbangkan optimasi kinerja. Berikut adalah beberapa tips:

Minimalkan penyalinan: Hindari penyalinan data piksel yang tidak perlu. Coba lakukan operasi di tempat (in-place) jika memungkinkan.
Gunakan WebAssembly: Untuk bagian kode yang kritis terhadap kinerja, pertimbangkan untuk menggunakan WebAssembly. WebAssembly dapat memberikan kinerja yang mendekati native untuk tugas-tugas komputasi intensif.
Optimalkan tata letak memori: Pilih format piksel dan tata letak memori yang tepat untuk aplikasi Anda. Pertimbangkan menggunakan format yang dipadatkan (packed) (misalnya, RGBA) jika Anda tidak perlu sering mengakses komponen warna individual.
Gunakan OffscreenCanvas: Untuk pemrosesan di latar belakang, gunakan OffscreenCanvas untuk menghindari pemblokiran thread utama.
Profil kode Anda: Gunakan alat pengembang browser untuk memprofil kode Anda dan mengidentifikasi hambatan kinerja.

Kompatibilitas Browser

WebCodecs dan API VideoFrame didukung di sebagian besar browser modern, termasuk Chrome, Firefox, dan Safari. Namun, tingkat dukungan dapat bervariasi tergantung pada versi browser dan sistem operasi. Periksa tabel kompatibilitas browser terbaru di situs seperti MDN Web Docs untuk memastikan bahwa fitur yang Anda gunakan didukung di browser target Anda. Untuk kompatibilitas lintas-browser, deteksi fitur direkomendasikan.

Jebakan Umum dan Pemecahan Masalah

Berikut adalah beberapa jebakan umum yang harus dihindari saat bekerja dengan bidang VideoFrame:

Tata letak yang salah: Pastikan bahwa array layout secara akurat mendeskripsikan tata letak memori dari data piksel. Offset atau stride yang salah dapat menyebabkan gambar rusak.
Format piksel yang tidak cocok: Pastikan format piksel yang Anda tentukan dalam metode copyTo cocok dengan format aktual dari VideoFrame.
Kebocoran memori: Selalu tutup objek VideoFrame dan CanvasImageBitmap setelah Anda selesai menggunakannya untuk melepaskan sumber daya yang mendasarinya. Kelalaian dalam melakukan ini dapat menyebabkan kebocoran memori.
Operasi asinkron: Ingatlah bahwa copyTo adalah operasi asinkron. Gunakan await untuk memastikan bahwa operasi penyalinan selesai sebelum Anda mengakses data piksel.
Pembatasan keamanan: Waspadai pembatasan keamanan yang mungkin berlaku saat mengakses data piksel dari video lintas-asal (cross-origin).

Contoh: Konversi YUV ke RGB

Mari kita pertimbangkan contoh yang lebih kompleks: mengonversi VideoFrame YUV420 menjadi VideoFrame RGB. Ini melibatkan pembacaan bidang Y, U, dan V, mengubahnya menjadi nilai RGB, dan kemudian membuat VideoFrame RGB baru.

Konversi ini dapat diimplementasikan menggunakan rumus berikut:


R = Y + 1.402 * (Cr - 128)
G = Y - 0.34414 * (Cb - 128) - 0.71414 * (Cr - 128)
B = Y + 1.772 * (Cb - 128)

Berikut adalah kodenya:


async function convertYUV420ToRGBA(videoFrame) {
  const width = videoFrame.codedWidth;
  const height = videoFrame.codedHeight;

  const yPlaneSize = width * height;
  const uvPlaneSize = width * height / 4;

  const yuvBuffer = new ArrayBuffer(yPlaneSize + 2 * uvPlaneSize);
  const yuvPlanes = new Uint8ClampedArray(yuvBuffer);

  const layout = [
    { offset: 0, stride: width }, // Bidang Y
    { offset: yPlaneSize, stride: width / 2 }, // Bidang U
    { offset: yPlaneSize + uvPlaneSize, stride: width / 2 } // Bidang V
  ];

  await videoFrame.copyTo(yuvPlanes, {
    format: 'I420',
    codedWidth: width,
    codedHeight: height,
    layout: layout
  });

  const rgbaBuffer = new ArrayBuffer(width * height * 4);
  const rgba = new Uint8ClampedArray(rgbaBuffer);

  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const yIndex = y * width + x;
      const uIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize;
      const vIndex = Math.floor(y / 2) * (width / 2) + Math.floor(x / 2) + yPlaneSize + uvPlaneSize;

      const Y = yuvPlanes[yIndex];
      const U = yuvPlanes[uIndex] - 128;
      const V = yuvPlanes[vIndex] - 128;

      let R = Y + 1.402 * V;
      let G = Y - 0.34414 * U - 0.71414 * V;
      let B = Y + 1.772 * U;

      R = Math.max(0, Math.min(255, R));
      G = Math.max(0, Math.min(255, G));
      B = Math.max(0, Math.min(255, B));

      const rgbaIndex = y * width * 4 + x * 4;
      rgba[rgbaIndex] = R;
      rgba[rgbaIndex + 1] = G;
      rgba[rgbaIndex + 2] = B;
      rgba[rgbaIndex + 3] = 255; // Alpha
    }
  }

  const newFrame = new VideoFrame(rgba, {
    format: 'RGBA',
    codedWidth: width,
    codedHeight: height,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  videoFrame.close(); // Lepaskan frame asli
  return newFrame;
}

Contoh ini menunjukkan kekuatan dan kompleksitas bekerja dengan bidang VideoFrame. Ini memerlukan pemahaman yang baik tentang format piksel, tata letak memori, dan konversi ruang warna.

Kesimpulan

API bidang VideoFrame di WebCodecs membuka tingkat kontrol baru atas pemrosesan video di browser. Dengan memahami cara mengakses dan memanipulasi data piksel secara langsung, Anda dapat membuat aplikasi canggih untuk efek video real-time, visi komputer, penyuntingan video, dan banyak lagi. Meskipun bekerja dengan bidang VideoFrame bisa menjadi tantangan, imbalan potensialnya signifikan. Seiring WebCodecs terus berkembang, tidak diragukan lagi ini akan menjadi alat penting bagi pengembang web yang bekerja dengan media.

Kami mendorong Anda untuk bereksperimen dengan API bidang VideoFrame dan menjelajahi kemampuannya. Dengan memahami prinsip-prinsip yang mendasarinya dan menerapkan praktik terbaik, Anda dapat menciptakan aplikasi video yang inovatif dan berkinerja tinggi yang mendorong batas dari apa yang mungkin dilakukan di browser.

Pembelajaran Lebih Lanjut

MDN Web Docs tentang WebCodecs
Spesifikasi WebCodecs
Repositori kode contoh WebCodecs di GitHub.